const EducationLevelTemplate = `
  <el-card v-show="isEmpty" class="box-card">
    <div slot="header" class="clearfix">
      <span>{{title}}</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" label-width="117px" size="small">
      <el-row>
      <el-col :span="8">
        <el-form-item label="学历层次">
        <el-select v-model="formData.level" placeholder="请选择">
          <el-option v-for="item in levelList" :key="item.id" :value="item.educationName" :label="item.educationName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="专业">
          <el-input v-model="formData.discipline" placeholder="请输入专业名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="毕业院校">
          <el-input v-model="formData.school" placeholder="请输入毕业院校"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学习形式">
          <el-select v-model="formData.path" placeholder="请选择">
            <el-option label="全日制" value="全日制"></el-option>
            <el-option label="成人高考" value="成人高考"></el-option>
            <el-option label="网络教育" value="网络教育"></el-option>
            <el-option label="自学考试" value="自学考试"></el-option>
            <el-option label="开放教育" value="开放教育"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="证书编号">
          <el-input v-model="formData.cerNum" placeholder="请输入证书编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="毕业时间">
          <el-date-picker
            style="width: 100%;"
            value-format="yyyy-MM-dd"
            v-model="formData.time"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="毕业证">
          <el-upload
            action="#"
            ref="byz"
            accept="image/*"
            :file-list="byzFile"
            :auto-upload="false"
            :limit="limitCount"
            list-type="picture-card"
            :on-change="(file, fileList) => handlePictureChange(file, fileList, byzName, 'byz')"
            :on-preview="handlePicturePreview"
            :on-remove="(file, fileList) => handleRemove(file, fileList, byzName)">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpeg/jpg/png文件，且不超过1MB</div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item style="height: 156px;" label="学位证">
          <el-upload
            action="#"
            ref="xwz"
            accept="image/*"
            :file-list="xwzFile"
            :auto-upload="false"
            :limit="limitCount"
            list-type="picture-card"
            :on-change="(file, fileList) => handlePictureChange(file, fileList, xwzName, 'xwz')"
            :on-preview="handlePicturePreview"
            :on-remove="(file, fileList) => handleRemove(file, fileList, xwzName)">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpeg/jpg/png文件，且不超过1MB</div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="margin-top: 18px;">
        <el-form-item label="电子注册表">
          <el-upload
            action="#"
            style="display: inline-block; height: 32px;"
            ref="zcb"
            accept=".pdf"
            :file-list="zcbFile"
            :auto-upload="false"
            :limit="limitCount"
            list-type="text"
            :on-change="(file, fileList) => handlePictureChange(file, fileList, zcbName, 'zcb')"
            :on-preview="handlePDFPreview"
            :on-remove="(file, fileList) => handleRemove(file, fileList, zcbName)">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="el-upload__tip">只能上传pdf文件，且不超过2MB</div>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-card>
`;

Vue.component('app-education-level', {
  name: 'app-education-level',
  props: ['levelnum', 'type', 'fileMap'],
  template: EducationLevelTemplate,
  computed: {
    isDisable() {
      return this.type === 'look';
    },
    title() {
      ['', 'look'].includes(this.type) || (this.isEmpty = true);
      return this.levelnum === 1 ? '第一学历' : '第二学历';
    },
    byzName() {
      return this.levelnum === 1 ? 'biyezheng1' : 'biyezheng2';
    },
    xwzName() {
      return this.levelnum === 1 ? 'xueweizheng1' : 'xueweizheng2';
    },
    zcbName() {
      return this.levelnum === 1 ? 'zhucebiao1' : 'zhucebiao2';
    },
    byzFile() {
      const file = this.fileMap.find((item) => item.property === this.byzName);
      if (file) {
        !this.isEmpty && (this.isEmpty = true);
        this.$nextTick(() => {
          this.$refs.byz.$children[1].$el.style = 'display: none;';
        });
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.byz.$children[1].$el.style = 'display: block;';
        });
        return [];
      }
    },
    xwzFile() {
      const file = this.fileMap.find((item) => item.property === this.xwzName);
      if (file) {
        !this.isEmpty && (this.isEmpty = true);
        this.$nextTick(() => {
          this.$refs.xwz.$children[1].$el.style = 'display: none;';
        });
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.xwz.$children[1].$el.style = 'display: block;';
        });
        return [];
      }
    },
    zcbFile() {
      const file = this.fileMap.find((item) => item.property === this.zcbName);
      if (file) {
        !this.isEmpty && (this.isEmpty = true);
        this.$nextTick(() => {
          this.$refs.zcb.$children[0].$el.style = 'display: none;';
        });
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.zcb.$children[0].$el.style = 'display: block;';
        });
        return [];
      }
    },
  },
  watch: {
    formData: {
      handler: function (val) {
        for (let key in val) {
          // 如果不是查看操作就全部显示
          if (val[key]) {
            this.isEmpty = true;
            return;
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      limitCount: 1,
      isEmpty: false,
      dialogVisible: false,
      dialogImageUrl: '',
      fileDic: new Map(),
      levelList: [
        { id: 1, educationName: '初中' },
        { id: 2, educationName: '高中' },
        { id: 3, educationName: '中专' },
        { id: 4, educationName: '大专' },
        { id: 5, educationName: '本科' },
        { id: 6, educationName: '职高' },
        { id: 7, educationName: '硕士研究生' },
        { id: 8, educationName: '博士研究生' },
        { id: 9, educationName: '其他' },
      ],
      formData: {
        level: '',
        discipline: '',
        school: '',
        path: '',
        cerNum: '',
        time: '',
      },
    };
  },
  methods: {
    hideOrShowUpload(name, isShow) {
      switch (name) {
        case 'biyezheng1':
        case 'biyezheng2':
          console.log(`byz`, this.$refs.byz);
          this.$refs.byz.$children[1].$el.style = isShow
            ? ''
            : 'display: none;';
          break;
        case 'xueweizheng1':
        case 'xueweizheng2':
          console.log(`xwz`, this.$refs.xwz);
          this.$refs.xwz.$children[1].$el.style = isShow
            ? ''
            : 'display: none;';
          break;
        case 'zhucebiao1':
        case 'zhucebiao2':
          console.log(`zcb`, this.$refs.zcb);
          this.$refs.zcb.$children[0].$el.style = isShow
            ? ''
            : 'display: none;';
          break;
      }
    },
    handleRemove(file, fileList, name) {
      this.dialogImageUrl = '';
      this.fileDic.delete(name);
      this.hideOrShowUpload(name, true);
    },
    handlePictureChange(file, fileList, name, refName) {
      const maxSize = 1024 * 1024;
      const zcbmaxSize = 1024 * 1024 * 2;
      if (refName === 'zcb' && file.size > zcbmaxSize) {
        this.$message.error('文件大小超过限制（1 MB）');
        // 清除文件列表，阻止文件上传
        this.$refs[refName].clearFiles();
        this.hideOrShowUpload(name, true);
        return;
      }
      if (file.size > maxSize) {
        this.$message.error('文件大小超过限制（1 MB）');
        // 清除文件列表，阻止文件上传
        this.$refs[refName].clearFiles();
        this.hideOrShowUpload(name, true);
      } else {
        this.fileDic.set(name, file.raw);
        this.hideOrShowUpload(name, false);
      }
    },
    handlePDFPreview(file) {
      const url = file.url ? encodeURIComponent(file.url) : window.URL.createObjectURL(file.raw);
      window.open('../../pdf/web/viewer.html?file=' + url);
    },
    handlePicturePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
});
